<template>
    <div class="app-container">
        <levelbar></levelbar>
        <TableLayout form-title="">
            <div class="table-title" slot="table-title">
                <div class="btnPosition">
                    <el-button  @click="cancel">返回</el-button>
                </div>
            </div> 
            <el-table :data="tableData" v-loading="loading" style="width: 100%">

                <el-table-column label="资料标题" >
                    <template scope="scope">
                        <span>{{scope.row.title}}</span>
                    </template>
                </el-table-column>

                <el-table-column label="创建时间" width="180px">
                    <template scope="scope">
                        <span>{{scope.row.createTime}}</span>
                    </template>
                </el-table-column>   
                <el-table-column label="操作" width="220px">
                    <template scope="scope">
                        <el-button type="text" class="btn-success" @click="download(scope.row.fileUrl)">下载</el-button>
                        <el-button type="text" class="btn-success" @click="downloadDetails(scope.row.articleId)">下载详情</el-button>
                        <el-button type="text" class="btn-success" @click="deleteList(scope.row.articleId)">删除</el-button>
                    </template>
                </el-table-column>        
            </el-table>
            <div class="pagination-container">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageQuery.total"
                    :current-page.sync="pageQuery.currentpage"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
    import Levelbar from '../../layout/Levelbar';
    import TableLayout from 'components/TableLayout';
    import { getListPage, removeNotice } from 'api/bulletinBoard';
    import { mapState, mapActions } from 'vuex';

    export default {
        name: 'messageList',
        components: { TableLayout, Levelbar },
        data() {
            return {
                loading: true,  
                tableData: [],
                pageQuery: {
                    currentpage: 1,
                    total: 0
                }
            }
        },
        created() {
            this.queryData();
        },
        computed: {
            ...mapState({
                config: state => state.config.table
            })
        },
        mounted() {
            $('.form-box').hide();
        },
        methods: {
            ...mapActions(['ChangePageSize']),
            handleSizeChange(val) {
                this.pageQuery.currentpage = 1;
                this.ChangePageSize(val);
                this.queryData();
            },
            handleCurrentChange(val) {
                this.pageQuery.currentpage = val;
                this.queryData();
            },
            queryData() {
                getListPage(this.pageQuery.currentpage, this.config.pageSize, '3').then(response => {
                    this.loading = false;
                    if (response.data.status == 200) {
                        this.tableData = response.data.content.list;
                        this.pageQuery.total = response.data.content.pagination.total; 
                    } else {
                        this.$message.error(response.data.errorMsg);
                    }
                }).catch(() => {
                    this.loading = false;
                });
            },
            download(fileUrl) {
                window.location.href = fileUrl;
            },
            deleteList(articleId) {
                this.$confirm('确定删除该文档？', '', {
                    closeOnClickModal: false,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: ' ', // warning
                    title: '  '
                }).then(() => {
                    removeNotice(articleId).then(response => {
                        this.$message.success(response.data.errorMsg);
                        this.queryData();
                    })
                }).catch((e) => {
                    this.$message.info('已取消删除');     
                });
            },
            // 取消
            cancel() {
                this.$router.go(-1)
            },
            // 下载详情
            downloadDetails(articleId) {
                this.$router.push({ path: `downloadDetails/${articleId}`});
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .app-container{
        position: relative;
        padding: 20px 20px 10px;
    }
    .el-message-box__message {
        p {
            font-size: 18px;
            color: #333;
            text-align: center;
        }
    }
    .el-message-box__btns {
        text-align: center;
    }
</style>